<template>
    <el-dialog v-if="internalVisible" :title="dialogTitle" :visible.sync="internalVisible" :width="width" append-to-body
        @close="handleClose">
        <div class="simple-dialog__body" :style="bodyStyle">
            <el-form :label-width="labelWidth" :label-position="labelPosition">
                <el-form-item v-for="item in currentForm" :key="item.model || item.label" :label="item.label">
                    <slot v-if="item.slot" :name="item.slot" :item="item" :form="internalForm" />
                    <el-input v-else v-model="internalForm[item.model]" :placeholder="item.placeholder"
                        :readonly="isReadonly(item)" :disabled="item.disabled" :type="item.type || 'text'"
                        :rows="item.rows" :autosize="item.autosize" />
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button v-for="btn in dialogButtons" :key="btn.label" :type="resolveButtonType(btn)" :plain="btn.plain"
                :disabled="btn.disabled" @click="handleButtonClick(btn)">
                {{ btn.label }}
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "SimpleDialog",
    props: {
        dialogTitle: {
            type: String,
            default: "详情"
        },
        dialogType: {
            type: String,
            default: "view" // view / edit / create
        },
        detailDialogVisible: {
            type: Boolean,
            default: undefined
        },
        visible: {
            type: Boolean,
            default: undefined
        },
        width: {
            type: String,
            default: "40%"
        },
        bodyStyle: {
            type: Object,
            default: () => ({ maxHeight: "380px", overflowY: "auto", padding: "0 10px" })
        },
        labelWidth: {
            type: String,
            default: "140px"
        },
        labelPosition: {
            type: String,
            default: "right"
        },
        currentForm: {
            type: Array,
            default: () => [
                { label: "项目名称", model: "projectName", placeholder: "请输入项目名称" },
                { label: "建设地点", model: "constructionSite", placeholder: "请输入建设地点" },
                { label: "投资总额（万元）", model: "totalInvestment", placeholder: "请输入投资总额（万元）" },
                { label: "建设内容及规模", model: "constructionContentAndScale", placeholder: "请输入建设内容及规模" },
                { label: "建设单位", model: "constructionUnit", placeholder: "请输入建设单位" },
                { label: "联系人", model: "contactPerson", placeholder: "请输入联系人" },
                { label: "联系电话", model: "contactNumber", placeholder: "请输入联系电话" }
            ]
        },
        formData: {
            type: Object,
            default: () => ({})
        },
        dialogButtons: {
            type: Array,
            default: () => ([
                { label: "关闭", type: "close" }
            ])
        }
    },
    data() {
        return {
            internalVisible: false,
            internalForm: {}
        };
    },
    watch: {
        detailDialogVisible: {
            immediate: true,
            handler(val) {
                if (typeof val === "boolean" && val !== this.internalVisible) {
                    this.internalVisible = val;
                }
            }
        },
        visible: {
            immediate: true,
            handler(val) {
                if (typeof val === "boolean" && val !== this.internalVisible) {
                    this.internalVisible = val;
                }
            }
        },
        internalVisible(val) {
            this.$emit("update:detailDialogVisible", val);
            this.$emit("update:visible", val);
            this.$emit("input", val);
            if (!val) {
                this.$emit("closed");
            }
        },
        formData: {
            deep: true,
            immediate: true,
            handler(val) {
                this.internalForm = val && typeof val === "object" ? { ...val } : {};
            }
        }
    },
    methods: {
        openDetailDialog(record = {}) {
            this.internalForm = record && typeof record === "object" ? { ...record } : {};
            this.internalVisible = true;
            this.$emit("open", this.internalForm);
        },
        closeDialog() {
            this.internalVisible = false;
            this.$emit("close");
        },
        handleClose() {
            this.closeDialog();
        },
        handleButtonClick(btn) {
            const payload = {
                button: btn,
                form: { ...this.internalForm }
            };
            if (typeof btn.handler === "function") {
                btn.handler(payload.form, btn);
            }
            if (btn.type === "submit") {
                this.$emit("submit", payload.form, btn);
                if (btn.autoClose !== false) {
                    this.closeDialog();
                }
            } else if (btn.type === "close") {
                this.closeDialog();
            } else {
                this.$emit("action", payload);
                if (btn.autoClose) {
                    this.closeDialog();
                }
            }
        },
        resolveButtonType(btn) {
            if (btn.elType) return btn.elType;
            if (btn.type === "submit") return "primary";
            if (btn.type === "close") return "default";
            return btn.type || "default";
        },
        isReadonly(item) {
            if (Object.prototype.hasOwnProperty.call(item, "readonly")) {
                return item.readonly;
            }
            return this.dialogType === "view";
        }
    }
};
</script>

<style scoped>
.simple-dialog__body {
    width: 100%;
}
</style>